<template>
  <div id="brief-playlists">
    <div
      v-for="(item, index) in playlists"
      :key="index"
      class="brief-playlist"
      @click="playlistClick(item.id)">
      <div class="img">
        <img
          :src="item.coverImgUrl || item.coverUrl || item.picUrl"
          @load="imgLoad">
        <!-- 播放数量 -->
        <div class="playCount">
          {{ item.playCount | tenThousand }}
        </div>
        <!-- 播放按钮 -->
        <div class="playButton">
          <i class="iconfont icon-bofang"></i>
        </div>
      </div>
      <!-- 歌单名字 -->
      <p>{{ item.name }}</p>
    </div>
  </div>
</template>

<script>
import { debounce } from 'utils'

export default {
  name: 'briefPlaylist',
  data () {
    return {
      imgLoadDebounce: null
    }
  },
  props: {
    playlists: {
      type: Array,
      default () {
        return []
      }
    }
  },
  created () {
    this.imgLoadDebounce = debounce(() => {
      this.$emit('imgLoad')
    })
  },
  methods: {
    // 1. 歌单被点击
    playlistClick (id) {
      this.$router.push(`/playlist/detail?id=${id}`)
    },
    // 2. 图片加载完成
    imgLoad () {
      this.imgLoadDebounce()
    }
  }
}
</script>

<style scoped lang="less">
#brief-playlists {
  margin-top: 30px;
  overflow: hidden;
  .brief-playlist {
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    float: left;
    width: calc((100% - 80px) / 5);
    margin: 0 20px 20px 0;
    padding-bottom: 20px;
    &:nth-of-type(5n) {
      margin-right: 0;
    }
    .img {
      position: relative;
      height: 0;
      padding-top: 100%;
      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 1px solid #e6e6e6;
      }
      .playCount {
        position: absolute;
        right: 1px;
        top: 0;
        font-size: 14px;
        padding: 3px 3px 3px 0;
        width: 60%;
        text-align: right;
        color: #fff;
        background-image: linear-gradient(to left, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.0));
      }
      .playButton {
        position: absolute;
        right: 7px;
        bottom: 9px;
        border-radius: 50%;
        opacity: 0;
        transition: all 200ms;
        i {
          border-radius: 50%;
          background-color: rgba(0, 0, 0, 0.2);
          font-size: 30px;
          color: #f4edf0;
        }
      }
      &:hover {
        .playButton {
          opacity: 1;
        }
      }
    }
    p {
      text-align: center;
      height: 0;
    }
  }
}
</style>
